<template>
    <div class="main">
        <div class="text">
            <p :style="{ fontSize: props.fontSize + 'px' }">{{ name }}</p>
        </div>
        <div class="btn">
            <mdui-button @click="s">{{ btn ? "停止" : "开始" }}</mdui-button>
        </div>
    </div>


</template>

<script setup>
import { ref, onMounted, defineProps, getCurrentInstance } from "vue";

import { useIpcRenderer } from "@vueuse/electron";
const { proxy } = getCurrentInstance();
// 获取props
const props = defineProps({
    name: {
        type: String,
        default: "",
    },
    cTime: {
        type: Number,
        default: 30,
    },
    fontSize: {
        type: Number,
        default: 16,
    },
    isPlay: {
        type: Boolean,
        default: false
    },
})



let name = ref("")
let btn = ref(false)
let arr = [
    "饶妙菱",
    "璩邵美",
    "邰若淑",
    "古雅凡",
    "卓书桃",
    "贺幻香",
    "孔依辰",
    "潘千柔",
    "束吟怀",
    "芮怡可",
    "毋冬寒",
    "戈若英",
    "焦松雨",
    "伊夏月",
    "莘忻忻",
    "翟皓月",
    "訾臻晰",
    "蒲梅青",
    "潘凝远",
    "蒙轩秀",
    "惠希慕",
    "衡南珍",
    "田绢子",
    "江雨琼",
    "郁念念",
    "池晶霞",
    "曹流逸",
    "康代丝",
    "寇平露",
    "鱼晓巧",
    "庾清淑",
    "龚天春",
    "毋元槐",
    "苏菊霞",
    "贾熙怡",
    "晃慕悦",
    "余嫚儿",
    "沃海桃",
    "空丝雨",
    "巴依珊",
    "武婀娜",
    "常珍丽",
    "从喜悦",
    "戈梦菡",
    "潘伶伶",
    "阙笛韵",
    "空琼芳",
    "侯晏然",
    "谢平宁",
    "苍春嫣"
];

let t = null
let s = () => {
    btn.value = !btn.value
    if (btn.value) {
        let i = 0
        t = setInterval(() => {
            name.value = arr[i]
            i++
            if (i > arr.length - 1) {
                i = 0
            }
        }, props.cTime)
    }
    else {
        clearInterval(t)
        if (props.name) {
            name.value = props.name
        }
        if (props.isPlay) {
            spk(name.value)
        }
        proxy.$emit("complete", name.value)

    }
}


</script>


<style scoped>
.main {
    width: 100%;
    height: 100%;

}

.main .text {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .btn {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>